<template>
    <page-view class="login-page">
        <page-header title="登录" :show-back="true"></page-header>
        <div class="content-box">
            <div class="login-box">
                <div class="userName-box">
                    <span class="iconfont iconxiazai"></span>
                    <div class="input-box">
                        <input type="text" name="" id="" placeholder="请输入用户名" v-model="loginParams.sno">
                        <span class="error-text">{{errors['loginParams.sno']}}</span>
                    </div>
                </div>
                <div class="pwd-box">
                    <span class="iconfont iconsuo"></span>
                    <div class="input-box">
                        <input type="password" placeholder="请输入密码" v-model="loginParams.password">
                        <span class="error-text">{{errors['loginParams.password']}}</span>
                    </div>
                </div>
                <div class="orther-box">
                    <div class="check-box">
                        <input type="checkbox" v-model="checked">
                        <div>
                            记住账号
                        </div>
                    </div>
                    <div>
                        <a href="#">我要注册</a>
                    </div>
                </div>
                <div class="login-btn">
                    <button @click="checkLogin">登录</button>
                </div>
            </div>
        </div>
    </page-view>
</template>
<script>
import {mapActions} from "vuex";
    export default {
        name: "Login",
        data() {
            return {
                loginParams: {
                    sno: "",
                    password: ""
                },
                checked: false
            }
        },
        vuerify: {
            'loginParams.sno': {
                test: /^\d+$/,
                message: "请输入数字"
            },
            'loginParams.password': "required"
        },
        created() {
            if (localStorage.sno) {
                this.loginParams.sno = localStorage.getItem("sno");
                this.checked = true;
            }
        },
        methods: {
            ...mapActions(["setUserInfo"]),
            async checkLogin() {
                if (this.$vuerify.check()) {
                    // 是否将用户名存入缓存
                    if (this.checked) {
                        localStorage.setItem("sno", this.loginParams.sno);
                    } else {
                        localStorage.setItem("sno", "");
                    }
                    const MsgPrompt = this.$msg.loading({
                        title: "正在加载中",
                        duration: -1,
                        hasMask: true,
                        position: "center"
                    });
                    try {
                        let result = await this.$api.user.checkLogin(this.loginParams);
                        if (result.code == 1) {
                            // 将数据传递给actions
                            // this.$store.dispatch("setUserInfo",result.data);
                            // 简便写法
                            this.setUserInfo(result.data);
                            this.$router.back();
                        } else {
                            MsgPrompt = this.$msg.error("用户名或密码错误");
                        }
                    } catch (error) {
                        MsgPrompt.error("数据加载失败");
                    } finally {
                        MsgPrompt.close();
                    }
                }
            }
        },
        computed: {
            errors() {
                return this.$vuerify.$errors;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .login-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;

            .login-box {
                margin: 50px 20px 0 20px;
                border: 1px solid #ECECEC;
                padding: 10px;

                >div {
                    width: 100%;
                    height: 60px;
                    @include flexbox(row, flex-start, center);
                    border-bottom: 1px solid #ECECEC;

                    .iconfont {
                        font-size: 22px;
                        width: 50px;
                        @include flexbox(row, center, center)
                    }

                    .input-box {
                        flex: 1;

                        >input {
                            border: 0;
                            outline: 0;
                            width: 100%;
                            height: 100%;
                            font-size: 18px;
                        }

                        .error-text {
                            font-size: 12px;
                            color: red;
                        }

                    }
                }

                .orther-box {
                    height: 30px;
                    border: none;
                    @include flexbox(row, space-between, center);
                    font-size: 14px;

                    .check-box {
                        width: 75px;
                        height: 100%;
                        @include flexbox(row, space-between, center);
                    }
                }

                .login-btn {
                    border: none;
                    height: 40px;
                    margin-top: 15px;

                    >button {
                        width: 100%;
                        height: 100%;
                        background-color: $primaryColor;
                        font-size: 18px;
                        color: #fff;
                        border: none;
                        outline: none;
                    }
                }
            }
        }
    }
</style>